import { useNavigate, useParams } from "react-router-dom";

/*
 * @Author: Ping Chou
 * @Date: 2022-02-02 22:03:16
 * @LastEditTime: 2022-02-02 23:37:13
 * @LastEditors: Ping Chou
 * @Description: detail
 * @FilePath: /dojo-blog/src/BlogDetails.js
 */
import useFetch from "./useFetch";
const BlogDetails = () => {
  const { id } = useParams()
  const { data, isPending, error } = useFetch('http://localhost:8000/blogs/' + id)
  const navigate = useNavigate()
  const handleClick = () => {
    fetch('http://localhost:8000/blogs/' + id, {
      method: 'DELETE'
    }).then(() => {
      navigate('/');
    })
  }

  return (
    <div className="blog-details">
      { isPending && <div>Loading...</div> }
      {error && <div>{error}</div>}
      {data && (
        <article>
          <h2>{data.title}</h2>
          <p>{data.author}</p>
          <div>{data.body}</div>
          <button onClick={handleClick}>delete</button>
        </article>
      )}
    </div>
   );
}

export default BlogDetails;
